<template>
	<view class="container wallet-bg">
		<u-navbar title-size="34" title="我的钱包" back-icon-color="#FFFFFF" title-color="#FFFFFF" :border-bottom="false"
			:custom-back="goBack" placeholder :background="bgColor"></u-navbar>
		<view class="content">
			<view class="tetx-999BA8 fz-30">总资产(元)</view>
			<view class="text-ffffff fz-56 wallet-font" v-if="walletList.length > 0">{{walletList[0].balance}}</view>
			<view class="text-ffffff fz-56 wallet-font" v-else>0</view>
			<view>
				<template v-if="walletList.length == 0">
					<view class="wallet">
						<view class="wallet-logo d-flex align-items-center justify-content-between">
							<view class="d-flex align-items-center">
								<image class="logo" src="/static/mine/wallet-huifu.png"></image>
								<view class="text-ffffff fz-30">汇付钱包</view>
							</view>
							<view class="d-flex justify-content-end align-items-center" @click="walletPay">
								<view class="text-ffffff fz-30">去开户</view>
								<image class="open-icon" src="/static/mine/card-more.png"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="wallet" v-for="item in walletList">
						<view class="wallet-logo d-flex align-items-center justify-content-between">
							<view class="d-flex align-items-center">
								<image class="logo" src="/static/mine/wallet-huifu.png"></image>
								<view class="text-ffffff fz-30">汇付钱包</view>
							</view>
							<view class="d-flex justify-content-end align-items-center" @click="walletPay"
								v-if="item.status == 0">
								<view class="text-ffffff fz-30">去开户</view>
								<image class="open-icon" src="/static/mine/card-more.png"></image>
							</view>
							<view class="d-flex justify-content-end align-items-center" @click="walletOpen"
								v-if="item.status == 1">
								<view class="text-ffffff fz-30">继续开户</view>
								<image class="open-icon" src="/static/mine/card-more.png"></image>
							</view>
							<view class="d-flex justify-content-end align-items-center" v-if="item.status == 2"
								@click="walletManage(item.id)">
								<view class="text-ffffff fz-30">管理</view>
								<image class="wallet-open" src="/static/mine/wallet-setting.png"></image>
							</view>
						</view>
						<view class="text-ffffff">
							<span class="fz-44">￥</span><span class="fz-56 font-DIN">{{item.balance}}</span>
						</view>
					</view>
				</template>

				<view class="wallet">
					<view class="wallet-logo d-flex align-items-center justify-content-between">
						<view class="d-flex align-items-center">
							<image class="logo" src="/static/mine/wallet-shande.png"></image>
							<view class="text-ffffff fz-30">杉德钱包</view>
						</view>
						<view class="d-flex justify-content-end align-items-center" @click="$u.toast('敬请期待~')">
							<view class="text-ffffff fz-30">去开户</view>
							<image class="open-icon" src="/static/mine/card-more.png"></image>
						</view>
					</view>
					<!-- <view class="text-ffffff">
						 <span class="fz-44">￥</span><span class="fz-56 font-DIN">0</span>
					 </view> -->
				</view>
				<view class="wallet">
					<view class="wallet-logo d-flex align-items-center justify-content-between">
						<view class="d-flex align-items-center">
							<image class="logo" src="/static/mine/wallet-yibao.png"></image>
							<view class="text-ffffff fz-30">易宝</view>
						</view>
						<view class="d-flex justify-content-end align-items-center" @click="$u.toast('敬请期待~')">
							<view class="text-ffffff fz-30">去开户</view>
							<image class="open-icon" src="/static/mine/card-more.png"></image>
						</view>
					</view>
					<!-- <view class="text-ffffff">
						 <span class="fz-44">￥</span><span class="fz-56 font-DIN">0</span>
					 </view> -->
				</view>
			</view>
		</view>
		<u-popup v-model="walletShow" mode="center" border-radius="16" >
			<view class="album-box">
				<view class="wallet-popup-logo">
					<image src="/static/mine/wallet-popup-logo.png"></image>
				</view>
				<view class="wallet-popup-bg">
					<view class="title text-292940 fz-36 text-center font-weight-600">开通汇付钱包</view>
					<view class="text-292940 fz-30 text-center">开通汇付钱包需{{USER.open_wallet_price}}元开通费</view>
					<view class="popup-btn-box d-flex justify-content-between align-items-center" >
						<u-button type="text" class="text-666978 fz-36  btn-style" @click="walletShow = false">取消</u-button>
						<u-button type="text" class="text-ffffff fz-36  btn-style yellow-bg" @click="openCard">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showVerModal" ref="uModal"  content="确定前往实名认证吗？" show-cancel-button  @confirm="toVer" confirmColor="#00C0FF"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: {
					background: '#1C1C31'
				},
				isSearchWallet:false,//是否查询钱包信息
				macAddress:'',
				walletShow:false,
				showVerModal:false//实名认证弹窗
			}
		},
		onLoad() {
			this.getWalletList()
			// #ifdef APP-PLUS
			this.macAddress = this.tui.getDeviceMac()
			// #endif
			// #ifdef H5
			this.macAddress = this.tui.generateMixed(12)
			this.tui.getUserInfo()
			// #endif
		},
		onShow() {
			// #ifdef APP-PLUS
			if(this.isSearchWallet){
				this.getWalletList()
				this.tui.getUserInfo()
			}
			// #endif
		},		
		computed: {
			walletList() {
				return this.$store.state.wallet.walletList
			},
			USER(){
				return this.$store.state.auth.USER
			}
		},
		//安卓实体返回判断
		onBackPress(event) {
			if(event.from == 'backbutton'){
				this.goBack()
				return true
			}
		},
		onPullDownRefresh() {
			this.getWalletList()
		},
		methods: {
			goBack() {
				let pages = getCurrentPages(); // 当前页面路由
				let beforePage = pages[pages.length - 2]; // 上一个页面路由
				if (beforePage) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/tabBars/mine'
					})
				}
			},
			//前往实名认证
			toVer(){
				this.showVerModal = false
				uni.navigateTo({
					url:'/pages/setting/verified'
				})
			},
			//开卡提示
			walletPay(){
				//未认证，则提示是否前往实名认证
				if(this.USER.status == 0){
					return this.showVerModal = true
				}
				if(this.USER.wallet_count == 0 || this.walletList[0].status == 0){
					this.walletShow = true
				}
			},
			//开卡
			openCard(){
				this.walletShow = false
				this.isSearchWallet = true
				// #ifdef H5
				let param = {
					return_url: `${this.$BASE_PATH}/#/pages/secondary/mine/wallet`,
					mac:this.macAddress
				}
				// #endif
				// #ifdef APP-PLUS
				let param = {
					return_url: '',
					mac:this.macAddress
				}
				//钱包支付
				// #endif   
				this.$store.dispatch('wallet/walletPay',param).then(res=>{
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: `/pages/secondary/mine/openWallet?url=${res.data}`
					})
					// #endif
					// #ifdef H5
					window.location.href = res.data
					// #endif
				})
			},
			//钱包开户
			walletOpen() {
				this.isSearchWallet = true
				// #ifdef APP-PLUS
				let return_url = ''
				// #endif
				// #ifdef H5
				let return_url = `${this.$BASE_PATH}/#/pages/secondary/mine/wallet`
				// #endif
				this.$store.dispatch('wallet/walletOpen', { return_url: return_url}).then(res => {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: `/pages/secondary/mine/openWallet?url=${res.data}`
					})
					// #endif
					// #ifdef H5
					window.location.href = res.data
					// #endif
				}).catch(error => {
					if (error.data.code == 302) {
						this.getWalletList()
					}
				})
			},
			//钱包管理
			walletManage(wallet_id) {
				this.isSearchWallet = true
				// #ifdef APP-PLUS
				let return_url = ''
				// #endif
				// #ifdef H5
				let return_url = `${this.$BASE_PATH}/#/pages/secondary/mine/wallet`
				// #endif
				this.$store.dispatch('wallet/walletManage', { wallet_id: wallet_id, return_url: return_url}).then(res => {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: `/pages/secondary/mine/manageWallet?url=${res.data}`
					})
					// #endif
					// #ifdef H5
					window.location.href = res.data
					// #endif
				})
			},
			//钱包列表
			getWalletList() {
				this.$store.dispatch('wallet/wallet').then(res => {
					uni.stopPullDownRefresh()
					this.isSearchWallet = false
					if (res.length > 0) {
						if (res[0].status == 0) {
							//如何开户状态为0则查询开户状态
							this.walletSearch(res[0].id)
						}
					}
				})
			},
			//查询开户状态
			walletSearch(wallet_id) {
				this.$store.dispatch('wallet/walletSearch', { wallet_id: wallet_id }).then(res => {
					this.$store.dispatch('wallet/wallet').then(res => {})
				})
			},
			//查询钱包余额
			walletBalance(wallet_id) {
				this.$store.dispatch('wallet/walletBalance', { wallet_id: wallet_id }).then(res => {
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
	}

	.content {
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;

	}

	.wallet-font {
		font-family: DIN;
		margin: 16upx 0 48upx 0;
	}

	.wallet {
		margin-bottom: 36upx;
		width: 100%;
		height: 250upx;
		padding: 35upx 30upx;
		box-sizing: border-box;
		box-shadow: -5px -6px 4px 0px rgba(0, 0, 0, 0.05);
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: -5upx -6upx 4upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16upx;
		.wallet-logo {
			height: 40upx;
			margin-bottom: 55upx;

			.logo {
				width: 40upx;
				height: 40upx;
				margin-right: 18upx;
			}
		}

		.open-icon {
			width: 28upx;
			height: 28upx;
			margin-left: 8upx;
		}

		.wallet-open {
			width: 32upx;
			height: 32upx;
			margin-left: 8upx;
		}
	}

	.wallet:nth-of-type(1) {
		background-image: url(/static/mine/Wallet1.png);
	}

	.wallet:nth-of-type(2) {
		background-image: url(/static/mine/Wallet2.png);
	}

	.wallet:nth-of-type(3) {
		background-image: url(/static/mine/Wallet3.png);
	}
	/deep/.u-mode-center-box {
		background: rgba(255, 255, 255, 0);
	}
	.album-box {
		height: 500upx;
		width: 640upx;
		.wallet-popup-logo{
			width: 98upx;
			height: 98upx;
			margin:0 auto 0;
			image{
				width: 98upx;
				height: 98upx;
				vertical-align: top;
			}
		}
		.wallet-popup-bg{
			margin-top: -50upx;
			width: 640upx;
			height: 400upx;
			border-radius: 16upx;
			background: url(/static/mine/wallet-popup-bg.png) no-repeat;
			background-size: 100% 100%;
			.title {
				padding-top: 87upx;
				margin-bottom: 30upx;
			}
				
			.popup-btn-box {
				padding: 0 40upx;
				box-sizing: border-box;
				margin-top: 59upx;
				.btn-style {
					width: 268upx;
					height: 88upx;
					background: rgba(216,217,225,0.5);
					border-radius: 49upx;
				}
			}
		}
		
	
		
	}
</style>